<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>身份证识别</title>
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
  <style>
    .hero {
      height: 100vh;
      display: flex;
      align-items: center;
      /* justify-content: center; */
    }

    .operator {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="hero bg-gray">
    <div class="hero-body">
      <h1>身份证识别</h1>
      <p>上传文件，然后识别信息~</p>
      <div class="form-horizontal">
        <div class="form-group">
          <div class="col-3">
            <label class="form-label" for="input-example-16">图片文件</label>
          </div>
          <div class="col-9">
            <input class="form-input" id="input-example-16" type="file">
          </div>
        </div>
        <div class="form-group operator">
          <div class="btn-group btn-group-block">
            <button class="btn" id="upload">上传识别</button>
          </div>
        </div>
        <div class="form-group">
          <table class="table">
            <thead>
              <tr>
                <th>项目</th>
                <th>值</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>姓名</td>
                <td id="name"></td>
              </tr>
              <tr>
                <td>性别</td>
                <td id="sex"></td>
              </tr>
              <tr>
                <td>民族</td>
                <td id="ethnicity"></td>
              </tr>
              <tr>
                <td>出生日期</td>
                <td id="birth-date"></td>
              </tr>
              <tr>
                <td>住址</td>
                <td id="address"></td>
              </tr>
              <tr>
                <td>身份证号</td>
                <td id="id-number"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script>
    const upload = document.querySelector('#upload')
    const input = document.querySelector('#input-example-16')
    upload.addEventListener('click', () => {
      const file = input.files[0]
      if (!file) {
        alert('请选择文件')
        return
      }

      const formData = new FormData()
      formData.append('file', file)

      fetch('/api/upload', {
        method: 'POST',
        body: JSON.stringify({
          filename: file.name,
          content_type: file.type
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => res.json()).then(res => {
        if (res.code === 0) {
          const url = res.data.url
          const key = res.data.key
          console.log(url, key)
          fetch(url, {
            method: 'PUT',
            mode: 'cors',
            body: file,
            headers: {
              'Content-Type': file.type
            }
          }).then((res) => {
            fetch("/api/ocr", {
              method: 'POST',
              body: JSON.stringify({
                key
              }),
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => res.json()).then(res => {
              if (res.code === 0) {
                console.log(res.data)
                const data = res.data?.data?.face?.data
                if (!data) {
                  alert('识别失败')
                  return
                } else {
                  document.querySelector('#name').innerText = data?.name
                  document.querySelector('#sex').innerText = data?.sex
                  document.querySelector('#ethnicity').innerText = data?.ethnicity
                  document.querySelector('#birth-date').innerText = data?.birthDate
                  document.querySelector('#address').innerText = data?.address
                  document.querySelector('#id-number').innerText = data?.idNumber
                  alert('识别成功')
                }
              } else {
                alert('识别失败')
              }
            })
          })
        } else {
          alert('上传失败')
        }
      }).catch(err => {
        console.log(err)
        alert('上传错误')
      })
    })
  </script>
</body>

</html>